<template>
    <div class="mainContent qualityrecord-container">
        <!-- 质检记录 -->
        <pathTracking :path='path' />
        <div class="qualityrecord-contant">
            <!-- 筛选按钮 -->
            <filterBtns 
                ref="filterBtns"
                :configArr="statusConfig"
                @changingCondition="changingCondition"
            />
            <!-- 搜索 -->
            <advancedSearch
                ref="advancedSearch"
                style="margin-top: 1.5rem;"
                :option="filterOption"
                @onSearch="toSearch"
                @getChild="getChild"
            />
            <!-- 列表标题&操作按钮 -->
            <el-row style="margin-top: 1.5rem;">
                <div class="common-table-title">
                    <div class="common-table-icon"></div>
                    <div class="common-table-fl">质检记录列表</div>
                    <div class="common-btn-group">
                        <div class="common-table-btn-item" @click="dialogAlert = true">批量退货</div>
                        <div class="common-table-btn-item" @click="exportTable">批量导出</div>
                    </div>
                </div>
            </el-row>
            <!-- 列表项 -->
            <el-row>
                <el-table
                    :data="recordItemsData"
                    :row-style="selectedHighlight"
                    max-height="550"
                    ref="recordList"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column
                        type="selection"
                        width="100"
                        align="center"
                    />
                    <el-table-column
                        v-for='(item, index) in qualityRecordItems'
                        :key="index"
                        :prop='item.prop'
                        :label='item.label'
                        :width="item.width"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div 
                                @click="toCheck.call(this, scope.row, item)"
                                :class="{blueFont: item.prop === 'barcode'}"
                            >
                                {{translateData(scope.row, item)}}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-row class="pagination-cont">
                    <el-pagination
                        @size-change="handleSizeChange"
                        background
                        @current-change="handleCurrentChange"
                        :current-page="currentPageIndex"
                        :page-sizes="pageSizeList"
                        :page-size="currentPageSize"
						:pager-count="5"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalPage"
                    />
                </el-row>
            </el-row>
            <!-- 查看 -->
            <seeDetailsPopup
                ref="seeDetailsPopup"
            />
        </div>
    </div>
</template>
<script>
import advancedSearch from "@/components/common/filter/advancedSearch"
import * as requests from './axios.js'
import datas from './datas.js'
import filterBtns from '@/components/common/filterBtns'
import pathTracking from '@/components/common/pathTracking'
import seeDetailsPopup from './seeDetailsPopup'
export default {
    name: 'qualityrecord',
    components: {
        pathTracking,
        advancedSearch,
        filterBtns,
        seeDetailsPopup
    },
    props:[
        ''
    ],
    data () {
        return {
            path: ['供应商管理', '质检管理', '质检记录'],
            // 四个筛选按钮
            statusConfig: datas.statusConfig,
            // 当前搜索条件
            currentSearchClue: '',
            // 选中项的数组
            TableSelectData: [],
            // 搜索选项
            filterOption: datas.filterOption,
            // 质检记录列表项
            qualityRecordItems: datas.qualityRecordItems,
            // 关联的订单
            assoicateOrders: datas.assoicateOrders,
            // 获取到的质检记录数据
            recordItemsData: [],
            // 总页数
            totalPage: 0,
            // 每页显示数据条数
            pageSizeList: [5, 10 ,20, 40],
            // 默认显示的数据条数
            currentPageSize: 5,
            // 当前页码
            currentPageIndex: 1,
            // 搜索条件质检状态
            qualityCondition: '',
            timer: null
        }
    },
    computed: {
        lang () {
            return this.$t('lang')
        }
    },
    methods: {
        // 获取选项卡的数量
        getCardCount () {
            requests.getGoodsCount().then(res => {
                console.log(res, 'statusConfig')
                let statusArr = [].concat(this.statusConfig);
                if(res.data.status === 200) {
                    statusArr.forEach(ele =>{
                        res.data.result.forEach(item => {
                            ele.value == item.status && (ele.count = item.count)
                        })
                    })
                }
                this.statusConfig = statusArr
            }).catch(err => {

            })
        },
        // 点击搜索
        async toSearch(val) {
            let obj = {}
            obj.status = this.qualityCondition;
            // 当前搜索条件
            this.currentSearchClue = val;
            if(!Array.isArray(val)) {return}
            val.map(ele => {
                if(ele.value) {
                    if(ele.key === 'qualityTime') {
                        obj.qualityTimeStart = convertDate(Date.parse(ele.value[0]))
                        obj.qualityTimeEnd = convertDate(Date.parse(ele.value[1]))
                    }else {
                        obj[ele.key] = ele.value
                    }
                }
            })
            let param = {
                condition: obj,
                pageIndex: this.currentPageIndex,
                pageSize: this.currentPageSize,
                pageTotal: 5,
                total: 0
            }
            let rowRes = await requests.doSearch(param)
            if(rowRes && rowRes.data.status === 200) {
                this.recordItemsData = rowRes.data.result.result
                this.totalPage = rowRes.data.result.total
            }else {
                this.$message({
                    showClose: true,
                    message: '查询失败',
                    type: 'error'
                });
            }
        },
        // 点击查看
        toCheck (data, item) {
            if(item.prop === "barcode") {
                this.$refs.seeDetailsPopup.openBox(data.barcode, data.id)
            }
        },
        // 获取质检状态选项
        async getConditions () {
            let rowConditions = await requests.getQualityConditons();
            if(rowConditions && rowConditions.data.status === 200) {
                let arr = [], conditions = rowConditions.data.result;
                conditions.forEach(item => {
                    let obj = {};
                    obj.label = item.value;
                    obj.value = item.key;
                    arr.push(obj);
                })
                this.filterOption.items.forEach(item => {
                    if(item.key === 'status') {
                        item.data = arr || []
                        // 更新4个卡片传的值,使相同项对应的value相同
                        this.statusConfig.map((ele, index) => {
                            Object.assign(ele, arr[index])
                        })
                    }
                })
            }
        },
        // 输入搜索条件
        getChild(data) {
            this.filterOption.items.map(ele => {
                ele.key !== 'status' && (ele.value = data[ele.key])
            })
        },
        changingCondition(data) {
            this.qualityCondition = data.value
            this.$nextTick(() => {
                let searchData = this.$refs.advancedSearch.getFormData()
                // 切换卡片自动搜索
                searchData && this.toSearch(searchData)
            })
        },
        // 修改?条/页
        handleSizeChange (size) {
            if(this.currentPageSize != size) {
                this.currentPageSize = size;
                this.debounceRequest();
            }
        },
        // 翻页
        handleCurrentChange (index) {
            if(this.currentPageIndex != index) {
                this.currentPageIndex = index;
                this.debounceRequest();
            }
        },
        translateData(data, item) {
            if(item.prop === 'status') {
                let temp;
                this.statusConfig.map(ele => {
                    ele.value == data.status && (temp = ele.label)
                })
                return temp
            }else {
                return data[item.prop]
            }
            console.log(data, item, 'translate')
        },
        debounceRequest() {
            if(this.timer) {
                clearTimeout(this.timer);
                this.timer = null
            }
            this.timer = setTimeout(() => {
                this.toSearch(this.currentSearchClue);
                clearTimeout(this.timer);
                this.timer = null;
            }, 300)
        },
        // 导出
        exportTable () {
            if(!this.TableSelectData.length) {
                this.$message({
                    showClose: true,
                    message: '请勾选要导出的条目',
                    type: 'warning'
                });
                return
            }
            let str = ''
            this.TableSelectData.map(ele => {
                str += `idList=${ele.id}&`
            })
            str = str.substr(0, str.length - 1)
            window.open(`${api.supplier}/supplierQualityRecord/exportQualityRecord?${str}`)
        },
        // 选中的数组
        handleSelectionChange (selection) {
            this.TableSelectData = selection;
        },
        selectedHighlight (data) {
            // 如果选中则添加高亮样式
            if (this.TableSelectData.indexOf(data.row) > -1) {
                return {
                    "background-color": "#FEF6EE"
                };
                return {}
            }
        },
    },
    mounted() {
        this.getConditions();
        this.getCardCount()
    }
}
</script>
<style scoped>
    .qualityrecord-contant{
        padding: 2.4rem;
    }
    
    .pagination-cont{
        height: 8.8rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }
    .blueFont{
        color: lightskyblue;
        cursor: pointer;
    }
</style>
